<template>
  <a-form-item
    :label="field.label"
    :name="field.field"
    :rules="field.rules"
    :help="field.help"
    :extra="field.description"
  >
    <!-- 自定义渲染 -->
    <component
      v-if="field.render"
      :is="field.render(field, model)"
      :value="customValue"
      :field="field"
      :model="model"
      @update:value="handleCustomChange"
    />
    
    <!-- 默认插槽 -->
    <slot
      v-else
      :field="field"
      :model="model"
      :value="customValue"
      :onChange="handleCustomChange"
    >
      <!-- 默认显示字段信息 -->
      <div class="custom-field-placeholder">
        <span>自定义字段: {{ field.label }}</span>
        <span v-if="customValue">值: {{ customValue }}</span>
      </div>
    </slot>
  </a-form-item>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  field: {
    type: Object,
    required: true
  },
  model: {
    type: Object,
    required: true
  },
  value: {
    type: [String, Number, Boolean, Array, Object],
    default: undefined
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change'])

// 计算属性：自定义值
const customValue = computed({
  get() {
    return props.value !== undefined ? props.value : props.field.defaultValue
  },
  set(val) {
    emit('update:value', val)
  }
})

// 处理自定义变化
const handleCustomChange = (value) => {
  emit('change', value)
  emit('update:value', value)
}
</script>

<style scoped>
.custom-field-placeholder {
  padding: 8px 12px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  color: #999;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style> 